<!DOCTYPE html>
<html lang="ch-CN">
<head>
  <meta charset="UTF-8">
  <title>获取元素样式</title>
</head>
<style>
  body {
    width: 100%;
    height: 100vh;
    background-color: wheat;
    font-size: 30px;
    /*文本透明*/
    /*text-decoration: none;*/
    font-family: "华文楷体";
  }

  p {
    font-size: 40px;
    margin: 20px 0 0 0;
    font-weight: bold;
  }

  span {
    /*display: block;*/
    line-height: 50px;
  }
nav{
  width: 60%;
  height: 100px;
  background-color: aliceblue;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.content{
  display: flex;
  /*flex-direction: column;*/
  justify-content: center;
  overflow: hidden;
  flex-wrap: wrap;
}
  header {
    /*text-align: center;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }

  #outer {
    width: 200px;
    height: 210px;
    background-color: #b3b1af;
    padding: 5px;
    border: solid 5px gray;
  }

  button {
    margin-top: 20px;
    font-size: 25px;
    width: 220px;
    height: 35px;
    background-color: #b3b1af;
    border: none;
    border-radius: 10%;
    box-shadow: black 0 0 5px;
    transition: linear 0.2s;
    z-index: 1;
  }

  button:hover {
    background-color: pink;
    transform: scale(1.1);
    color: deeppink;
  }
  footer{
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    margin-top: 5px;
    margin-left: 10px;
  }
  #box2{
    width: 200px;
    height: 210px;
    border: 10px gray solid;
    background-color: #b3b1af;
    overflow: auto;

  }
  #box3{
    width: 300px;
    height: 350px;
    background-color: black;
    color: white;
  }
</style>
<body>
<nav></nav>
<div class="content">
  <header>
    <div id="outer"></div>
    <button onclick="get_width()">获取宽</button>
    <button onclick="get_height()">获取高</button>
    <button onclick="get_bg_color()">获取背景颜色</button>
    <button onclick="get_margin_top()">获取上边距</button>
  </header>
  <footer>
    <div id="box2">
      <div id="box3"></div>
    </div>
    <button>获取宽</button>
    <button>获取高</button>
    <button>获取垂直滚动像素</button>
    <button>获取水平滚动像素</button>
  </footer>
</div>

</body>
<script>
  let box1=document.getElementById("outer")
  let nav=document.getElementsByTagName("nav")
  // 获取元素的内容区宽度
  function get(name){
    nav[0].innerHTML=getComputedStyle(box1,null)[name]
  }
  /* 1:方法  window.getComputedStyle(element, pseudoElement) 获取内容区的高度 (并且带有px)
              * element	必需。要为其获取计算样式的元素。
              * pseudoElement 可选。要获取的伪元素。
     2:属性  * clientWidth  返回元素的宽度，包括内边距。
             * clientHeight 返回元素的高度，包括内边距。
     3:属性  * offsetWidth	返回元素的宽度，包括内边距、边框和滚动条
             * offsetHeight	返回元素的高度，包括内边距、边框和滚动条。
             * offsetLeft	返回元素的水平偏移位置。
             * offsetParent	返回元素的定位祖先容器。
             * offsetTop	返回元素的垂直偏移位置。
     4:属性
             * scrollHeight	返回元素的整体高度，包括内边距。
             * scrollIntoView()	将元素滚动到浏览器窗口的可见区域。
             * scrollLeft	设置或返回元素内容水平滚动的像素数。
             * scrollTop	设置或返回元素内容垂直滚动的像素数。
             * scrollWidth	返回元素的整体宽度，包括内边距。
  */
  //方法获取 HTML 元素的计算 CSS 属性和值
  function get_width(){
    // 获取的元素(内容区)的宽度
    // get("width")
    // 获取的元素宽度 包括内边距  parseInt-去除符号 px
    // nav[0].innerHTML=parseInt(box1.clientWidth)
    //获取元素的高度，包括内边距、边框和滚动条
    nav[0].innerHTML=box1.offsetWidth
  }
  function get_height(){
    get("height")
    // nav[0].innerHTML=getComputedStyle(box1,null).height
  }
  function get_bg_color(){
    get("backgroundColor")
    // nav[0].innerText=getComputedStyle(box1,null).backgroundColor
  }
  function get_margin_top(){
    get("marginTop")
    // nav[0].innerText=getComputedStyle(box1,null).marginTop
  }
  // 用来获取元素的整体宽度，包括内边距的函数
  function all_btn2(button,fun){
    button.onclick=fun
  }
  //黑色盒子
  let box3=document.getElementById("box3")
  let box2=document.getElementById("box2")
  // 获取所有button
  let button=document.querySelectorAll("footer button")
  // 获取元素的整体宽度(包括内边距):
  all_btn2(button[0],function (){
    nav[0].innerHTML="元素的整体宽度(包括内边距):"+box3.scrollWidth
  })
  // 获取元素的整体高度(包括内边距):
  all_btn2(button[1],function (){
    nav[0].innerHTML="元素的整体宽度(包括内边距):"+box3.scrollHeight
  })
  // 获取垂直滚动像素:
  all_btn2(button[2],function (){
    nav[0].innerHTML="获取垂直滚动像素:"+box2.scrollTop
  })
  // 获取水平滚动像素:
  all_btn2(button[3],function (){
    nav[0].innerHTML="获取水平滚动像素:"+box2.scrollLeft
  })
</script>
</html>